import { Button, Badge, TabBar } from 'antd-mobile';
import styles from './index.less';
import React, { useState } from 'react';
import topBanner from '@/asset/topBanner.png';
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons';
import { history } from 'umi';

function Test(props: any) {
  const tabs = [
    {
      key: '/index/home',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/index/features',
      title: '企业风采  ',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/index/message',
      title: '信息发布',
      icon: (active: boolean) =>
        active ? <MessageFill /> : <MessageOutline />,
    },
    {
      key: '/index/personalCenter',
      title: '关于我们',
      icon: <UserOutline />,
    },
  ];

  const [activeKey, setActiveKey] = useState(
    sessionStorage.getItem('activePath'),
  );

  const handlePath = (val: any) => {
    history.push(val);
    setActiveKey(val);
    sessionStorage.setItem('activePath', val);
  };
  return (
    <div className={styles.bigBox}>
      <div className={styles.topBanner}>
        <img src={topBanner} alt="" />
      </div>
      <div className={styles.content}>{props.children}</div>

      <TabBar
        className={styles.admtabbar}
        activeKey={activeKey}
        onChange={handlePath}
      >
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  );
}

export default Test;
